<template>
    <div>
        <h2>主标题栏</h2>

        <p>带返回按钮的头部+搜索/header_array_search_red<br> 
            750×88px，图标大小48×48px，文体36px，背景色：#e50838 
            搜索:&#xe670; 返回：&#xe656;
        </p>
        <div class="header_one">
            <headerSearch title="红色友圈" :noBack = "true"></headerSearch>
        </div>

        <p>
            带返回按钮的头部+搜索/header_array_text_white<br>
            750×88px，图标大小48×48px，文体36px，颜色：#333333  设置：30px
        </p>
        <div class="header_two">
            <headerSearch title="白色友圈" :noBack = "true"></headerSearch>
        </div>
        
        <p>
            头部搜索/header_icon_search_red<br>
            背景：750×88px，背景色：#e50838，图标大小30×30px，文体22px，
            搜索框：500×54px，圆角8px，搜索：&#xe670;，更多：&#xe65c;
        </p>
        <div class="header_three">
            <headerBar></headerBar>   
        </div>

        <p>
            带搜索按钮的头部/header_search_red<br>
            750×88px，图标大小48×48px，文体36px，背景色：#e50838  搜索:&#xe670;    
        </p>
        <div class="header_four">
            <headerText title="红色文本标签"></headerText>
        </div>

        <p>
            带返回按钮的头部+设置/header_array_text_red<br>
            750×88px，图标大小48×48px，文体36px，背景色：#e50838  设置：30px
        </p>
        <div class="header_five">
            <setHeader title="红色设置" settext="设置" @done="gotobtn()"></setHeader>
        </div>

        <p>
            带返回分享按钮的头部/header_array_share_red<br>
            750×88px，图标大小48×48px，文体36px，背景色：#e50838  分享：&#xe663;
            :noBack="true"(搜索图标出现) :noBack="false"(两个图标出现)
        </p>
        <div class="header_six">
            <headerSearch title="红色分享" :searchBack="true"></headerSearch>
        </div>

        <p>
            带返回按钮的头部+设置/header_array_text_white<br>
            750×88px，图标大小48×48px，文体36px，背景色：#fff  设置：30px
        </p>
        <div class="header_seven">
            <setHeader title="白色设置" settext="设置" @done="gotobtn()"></setHeader>
        </div>

        <p>
            带搜索按钮的头部/header_search_white<br>
            750×88px，图标大小48×48px，文体36px，背景色：#fff  搜索:&#xe670;    
        </p>
        <div class="header_eight">
            <headerText title="白色文本标签"></headerText>
        </div>


        <h4>副标题栏</h4>

        <p>
            头部搜索/header_search<br>
            背景：750×88px，背景色：#e50838，图标大小30×30px，文体22px， 搜索框：710×54px，圆角8px，搜索：&#xe670;
        </p>
        <div class="SubtitleBar_one">
            <!-- 调用的时候，只需要复制需要的div即可 start -->
            <div class="header_search clear">
                <input ref="inputVal" class="header_icon_search_text searchInp" type="text" v-model="searchVal" @blur="checkName()" placeholder="" />
                <div v-show="searchBtnFlag" class="searchBtn" @click="searchIn">
                    <i class="iconfont icon-search_icon search_iconfont"></i> 搜索
                </div>
            </div>
            <!-- end -->
        </div>
        
        <h4>正文标题栏</h4>
        <p>
            栏目标题/title_text_more<br>
            背景：750×124px，标题文体：34px，颜色：#333333  更多文本：22px，颜色：#999999
        </p>
        <div class="more_title_bar">
            <div class="title_text_more">
              <h3>热销榜单<em>每日热销排行</em></h3>
              <router-link to="">更多<i class="iconfont icon-xiangyou"></i></router-link>
            </div>
        </div>

        <h4 style="padding-top:1.6rem;">正文列表</h4>

        <p>
            默认输入框/default_input_box<br>
            背景：750×100px，标题文体：26px，颜色：#999999  下边框颜色：#d8d8d8
        </p>
        <div class="input_bar">
            <div class="default_input_box">
                <input type="text" placeholder="请输入文字">
            </div>
        </div>

        <p style="padding-top: 0.8rem;">
            缩进输入框/indent_input_box<br>
            背景：750×100px，标题文体：26px，颜色：#999999  下边框颜色：#d8d8d8  两边缩进50px
        </p>
        <div class="input_bar_indent">
            <div class="indent_input_box">
                <input type="text" placeholder="请输入文字">
            </div>
        </div>

        <!-- 企业列表 -->
        <div class="business_bar">
            <p style="padding-bottom: 0.2rem;">企业列表</p>
            <div class="business_lists">
                <div class="business_left">
                    <img src="../common/images/userAvatar.png" alt="">
                </div>
                <div class="business_desc">
                    <h5>广东中山电子有限公司</h5>
                    <p>耐思智慧得到餐饮耐思智慧饮耐思智有限公司</p>
                </div>
                <div class="btn_small_red">
                    <button>沟通</button>
                </div>
            </div>
        </div>

        <!-- 协会列表 -->
        <div class="association_bar">
            <p style="padding-bottom: 0.2rem;">协会列表</p>
            <div class="association_lists">
                <div class="association_left">
                    <img src="../common/images/c_03.jpg" alt="">
                </div>
                <div class="association_desc">
                    <h5>广东智慧城协会</h5>
                    <p>耐思智慧 | 耐思智慧 | 耐思智慧</p>
                    <!-- <ul>
                        <li><a href="javascript:void(0)">耐思智慧</a></li>
                        <li><a href="javascript:void(0)">得到餐饮</a></li>
                        <li><a href="javascript:void(0)">更多选择工具</a></li>
                    </ul> -->
                </div>
                <div class="btn_small_red">
                    <button>沟通</button>
                </div>
            </div>
        </div>
        
        <!-- 填写输入框 -->
        <div class="input_bar_write">
            <p style="padding-bottom: 0.2rem;">填写输入框</p>
            <div class="write_input_box">
                <label for="">文本标签：</label>
                <input type="text" placeholder="文本标签">
            </div>
        </div>

        <!-- 图片上传 -->
        <div class="img_upload_bar">
            <p style="padding-bottom: 0.2rem;">图片上传</p>
            <div class="img_upload">
                <img src="../common/images/addphoto.jpg" alt="">
            </div>
        </div>

        <h4>正文菜单</h4>
        <!-- 主菜单 -->
        <div class="main_menu_bar">
            <p style="padding-bottom: 0.2rem;">主菜单</p>
            <div class="main_menu">
                <label for="">文本标签</label>
                <router-link to="">文本标签<i class="iconfont icon-xiangyou"></i></router-link>
            </div>
        </div>

        <!-- 主菜单带选项卡 -->
        <div class="main_menu_tab_bar">
            <p style="padding-bottom: 0.2rem;">主菜单带选项卡</p>
            <div class="main_menu">
                <label for="">文本标签</label>
                <mt-switch v-model="value"></mt-switch>
            </div>
        </div>

        <!-- 主菜单带内容 -->
        <div class="main_menu_content_bar">
            <p style="padding-bottom: 0.2rem;">主菜单带内容</p>
            <div class="main_menu">
                <label for="">用户名</label>
                <span>A13750040280</span>
            </div>
        </div>

        <!-- 主菜单带箭头 -->
        <div class="main_menu_arrow_bar">
            <p style="padding-bottom: 0.2rem;">主菜单带箭头</p>
            <div class="main_menu">
                <label for="">文本标签</label>
                <router-link to=""><i class="iconfont icon-xiangyou"></i></router-link>
            </div>
        </div>

        <!-- 主菜单带图标 -->
        <div class="main_menu_icon_bar">
            <p style="padding-bottom: 0.2rem;">主菜单带图标</p>
            <div class="main_menu">
                <label for=""><i class="iconfont icon-search_icon main_menu_icon"></i>文本标签</label>
            </div>
        </div>

        <!-- 主菜单带图标箭头 -->
        <div class="main_menu_arrowicon_bar">
            <p style="padding-bottom: 0.2rem;">主菜单带图标箭头</p>
            <div class="main_menu">
                <label for=""><i class="iconfont icon-search_icon main_menu_icon"></i>文本标签</label>
                <router-link to=""><i class="iconfont icon-xiangyou"></i></router-link>
            </div>
        </div>

        <!-- 主菜单带图标带内容 -->
        <div class="main_menu_iconcontent_bar">
            <p style="padding-bottom: 0.2rem;">主菜单带图标带内容</p>
            <div class="main_menu">
                <label for=""><i class="iconfont icon-search_icon main_menu_icon"></i>文本标签</label>
                <span>A13750040280</span>
            </div>
        </div>

        <!-- 默认底部 -->
        <!-- <div class="footer_bar">
            <so-footer></so-footer>
        </div> -->
        <!-- 聊天底部 -->
        <!-- <div class="chat_bar">
            <p style="padding-bottom: 0.2rem;">聊天底部</p>
            <div class="chat">
                <input type="text">
                <i class="iconfont icon-icon02"></i>
            </div>
        </div> -->

        <!-- 按钮 -->
        <div class="button_bar">
            <p style="padding-bottom: 0.2rem;">按钮</p>
            <div class="btn_big_red">
                <button>确认</button>
            </div>
            <div class="btn_middle_red">
                <button>加入圈子</button>
            </div>
            <div class="btn_small_red">
                <button>沟通</button>
            </div>
            <div class="btn_frame_red">
                <button>红底弹框按钮</button>
            </div>
            <div class="btn_big_white">
                <button>白色大按钮</button>
            </div>
            <div class="btn_small_white">
                <button>白色小按钮</button>
            </div>
        </div>

        <!-- 其他 -->
        <div class="other_bar">
            <p style="padding-bottom: 0.2rem;">其他</p>
            <!-- 圆形头像 -->
            <div class="coterie">
                <ul>
                  <li v-for="(coter, i) in coters" :key="i">
                    <router-link to="">
                      <img src="../common/images/company1.svg" alt="">
                      <span>{{coter.coterText}}</span>
                    </router-link>
                  </li>
                </ul>
            </div>  

            <!-- 具体参考首页代码 -->

            <!-- 大方形头像 -->
            <div class="big_square">
              <ul class="soc">
                <li>
                    <img src="../common/images/c_03.jpg" alt="">
                    <span>耐思智慧</span>
                </li>
                <li>
                    <img src="../common/images/c_03.jpg" alt="">
                    <span>耐思智慧</span>
                </li>
                <li>
                    <img src="../common/images/c_03.jpg" alt="">
                    <span>耐思智慧</span>
                </li>
                <li>
                    <img src="../common/images/c_03.jpg" alt="">
                    <span>耐思智慧</span>
                </li>
              </ul>
            </div>

            <!-- 小方形头像 -->
            <div class="small_square">
              <ul class="small_soc">
                <li>
                    <img src="../common/images/cir_05.jpg" alt="">
                    <span>耐思智慧</span>
                </li>
                <li>
                    <img src="../common/images/cir_05.jpg" alt="">
                    <span>耐思智慧</span>
                </li>
                <li>
                    <img src="../common/images/cir_05.jpg" alt="">
                    <span>耐思智慧</span>
                </li>
                <li>
                    <img src="../common/images/cir_05.jpg" alt="">
                    <span>耐思智慧</span>
                </li>
                <li>
                    <img src="../common/images/cir_05.jpg" alt="">
                    <span>耐思智慧</span>
                </li>
              </ul>
            </div>

            <!-- 三栏商品 -->
            <div class="host_item">
              <ul>
                <li v-for="(host, h) in hostlist" :key="h">
                  <router-link :to="host.link">
                    <img src="../common/images/cm_03.jpg" alt="">
                    <span>{{host.hostName}}</span>
                    <span>已售<strong>{{host.hostNum}}</strong>件</span>
                  </router-link>
                </li>
              </ul>
            </div>   
            
            <!-- 两栏商品 -->
            <div class="purchase">
              <ul class="purchase_list clear">
                <li v-for="(pur, p) in purlist" :key="p">
                  <router-link to="">
                    <img src="../common/images/cindex_37.jpg">
                    <span>{{pur.pur_name}}</span>
                    <span class="pur_scare">
                      <em>抢购价</em>
                      <strong><sub>￥</sub>{{pur.money}}</strong>
                      <small>已抢购{{pur.pur_num}}件</small>
                    </span>
                  </router-link>
                </li>
              </ul>
            </div>

            <!-- 活动列表 -->
            <div class="active_item">
              <ul>
                <li v-for="(activeitem, act) in actives" :key="act">
                  <router-link to="" class="clear">
                    <img src="../common/images/cindex_19.jpg">
                    <p class="active_text"><em class="cur">热门</em>{{activeitem.active_text}}</p>
                    <p class="active_text">开始时间：{{activeitem.active_time}}</p>
                    <p class="active_text"><span><sub>￥</sub><strong>{{activeitem.active_money}}</strong>起</span><span>{{activeitem.active_people}}</span></p>
                  </router-link>
                </li>
              </ul>
            </div>

            <!-- 新闻列表-多图 -->
            <div class="info">
              <p>无忧俱乐部九十八周庆在杭州天鹅酒店举行.</p>
              <ul>
                <li v-for="(info, fo) in infos" :key="fo">
                  <router-link to="">
                    <img src="../common/images/cindex_28.jpg">
                  </router-link>
                </li>
              </ul>
              <p class="info_time"><span>无忧健身器材</span><span>2018-11-21</span></p>
            </div>

            <!-- 新闻列表-单图 -->
            <div class="info_list">
              <ul>
                <li v-for="(initem, t) in infolist" :key="t">
                  <router-link to="" class="clear">
                    <div class="info_list_item_left">
                      <img src="../common/images/cindex_41.jpg">
                    </div>
                    <p>{{initem.info_name}}</p>
                    <p><span>{{initem.into_company}}</span><span>{{initem.info_time}}</span></p>
                  </router-link>
                </li>
              </ul>
            </div>

            <!-- 卡片头部上下具体在文件  "CircleIndex.vue" -->

            <!-- 地区、行业、协会下拉框 -->
            <div class="level_linkage">
                <select v-model="UnitSelected">
                    <option v-for="item in UnitList" :value="item.id" :key="item">{{item.name}}</option>
                </select>
                
                <select v-model="DepartmentSelected">
                    <option v-for="item in DepartmentList" :value="item.id" :key="item">{{item.name}}</option>
                </select>
                
                <select v-model="UserSelected">
                    <option v-for="item in UserList" :value="item.id" :key="item">{{item.name}}</option>
                </select>
            </div>
        </div>

    </div>
</template>

<script>
import soHeader from '../public/header.vue';
import headerSearch from '../public/header-search.vue';
import headerBar from '../public/header-bar.vue';
import headerText from '../public/header-text.vue';
import setHeader from '../public/setHeader.vue';
import soFooter from '../public/indexNav.vue';

var UnitRows = [
    {name:"地区",id:"0"},
    {name:"1",id:"1"},
    {name:"2",id:"2"},
];
var DepartmentRows = [
    {name:"行业",id:"0",pid:"0"},
    {name:"11",id:"1",pid:"1"},
    {name:"12",id:"2",pid:"1"},
    {name:"21",id:"3",pid:"2"},
    {name:"22",id:"4",pid:"2"}
];
var UserRows = [
    {name:"协会",id:"0",pid:"0"},
    {name:"111",id:"1",pid:"1"},
    {name:"112",id:"2",pid:"1"},
    {name:"121",id:"3",pid:"2"},
    {name:"122",id:"4",pid:"2"},
    {name:"211",id:"5",pid:"3"},
    {name:"212",id:"6",pid:"3"},
    {name:"221",id:"7",pid:"4"},
    {name:"222",id:"8",pid:"4"}
]

    export default {
        data() {
            return {
                headerTitle: "友圈",
                searchBtnFlag: true,
                coters: [
                    { coterText: '圈子'},
                    { coterText: '商家'},
                    { coterText: '热卖'},
                    { coterText: '活动'},
                    { coterText: '资讯'},
                ],
                hostlist: [
                    { 
                        link: '',
                        hostName: '灰色纱布懒人沙发',
                        hostNum: '9782'
                    },
                    { 
                        link: '',
                        hostName: '原木色镀金筷子',
                        hostNum: '327'
                    },
                    { 
                        link: '',
                        hostName: '轻柔抽纸纸巾包装',
                        hostNum: '9782'
                    },
                ],
                purlist: [
                    { 
                        pur_name: '钻石清洁电动牙刷',
                        money: '98',
                        pur_num: '1989'
                    },
                    { 
                        pur_name: '钻石清洁电动牙刷',
                        money: '98',
                        pur_num: '1989'
                    },
                    { 
                        pur_name: '钻石清洁电动牙刷',
                        money: '98',
                        pur_num: '1989'
                    },
                    { 
                        pur_name: '钻石清洁电动牙刷',
                        money: '98',
                        pur_num: '1989'
                    }
                ],
                actives: [
                    {
                        active_text: '无忧俱乐部九十八周庆全场办卡打6.6折，优惠多多。',
                        active_time: '2018-11-21',
                        active_money: '20',
                        active_people: '67人已经报名'
                    },
                    {
                        active_text: '无忧俱乐部九十八周庆全场办卡打6.6折，优惠多多。',
                        active_time: '2018-11-21',
                        active_money: '20',
                        active_people: '67人已经报名'
                    },
                    {
                        active_text: '无忧俱乐部九十八周庆全场办卡打6.6折，优惠多多。',
                        active_time: '2018-11-21',
                        active_money: '20',
                        active_people: '67人已经报名'
                    },
                    {
                        active_text: '无忧俱乐部九十八周庆全场办卡打6.6折，优惠多多。',
                        active_time: '2018-11-21',
                        active_money: '20',
                        active_people: '67人已经报名'
                    },
                ],
                infos: [
                    {id:1},{id:2},{id:3}
                ],
                infolist: [
                    {
                        info_name: '从零开始学习健身，第15天，参照第一天的样子，照第一天的样子。',
                        into_company: '北京朝阳区块链有限公司',
                        info_time: '2018-11-21'
                    },
                    {
                        info_name: '从零开始学习健身，第15天，参照第一天的样子，照第一天的样子。',
                        into_company: '北京朝阳区块链有限公司',
                        info_time: '2018-11-21'
                    },
                    {
                        info_name: '从零开始学习健身，第15天，参照第一天的样子，照第一天的样子。',
                        into_company: '北京朝阳区块链有限公司',
                        info_time: '2018-11-21'
                    },
                ],
                // 三级联动下拉框
                UnitSelected:"",
                UnitList:[],
                DepartmentSelected:"",
                DepartmentList:[],
                UserSelected:"",
                UserList:[]
            }
        },
        methods: {
            searchIn(){
                this.searchBtnFlag = !this.searchBtnFlag;
                this.$nextTick(function () {
                    //DOM 更新了
                    this.$refs.inputVal.focus();
                })
            },
            checkName() {
                this.searchBtnFlag = true;
            }
        },
        created () {
            this.UnitList = UnitRows;
            this.UnitSelected = this.UnitList.length>0 ? this.UnitList[0].id : "";

            var val = this.UnitSelected;
            this.DepartmentList = DepartmentRows.filter(function (x) { return x.pid == val });
            this.DepartmentSelected = this.DepartmentList.length>0 ? this.DepartmentList[0].id : "";

            val = this.DepartmentSelected;
            this.UserList = UserRows.filter(function (x){ return x.pid == val});
            this.UserSelected = this.UserList.length>0 ? this.UserList[0].id : "";
        },
        watch:{
            UnitSelected:function (val) {
                this.DepartmentList = DepartmentRows.filter(function (x) { return x.pid == val });
                this.DepartmentSelected = this.DepartmentList.length>0 ? this.DepartmentList[0].id : "";
            },
            DepartmentSelected:function (val) {
                this.UserList = UserRows.filter(function (x){ return x.pid == val});
                this.UserSelected = this.UserList.length>0 ? this.UserList[0].id : "";
            }
        },
        components: {
        soHeader,
        headerSearch,
        headerBar,
        headerText,
        setHeader,
        soFooter
        },
    }
</script>

<style>

h2 {
    font-size: 0.4rem;
    color: #666;
    padding-bottom: 0.2rem;
}
h4 {
    padding-top: 1rem;
    padding-bottom: 0.2rem;
    font-size: 0.4rem;
    color: #666;
}
p {
    font-size: 0.32rem;
    color: #333;
    padding-bottom: 1.4rem;
    /* line-height: 0.46rem; */
}
.header_eight .header_search_white,
.header_seven .header_array_text_white,
.header_two .header_array_search_white {
    background-color: #fff;
    color: #000;
}

.header_one .header_array_text_white .icon_white {
    color: #000;
    font-size: 0.48rem !important;
}

.header_eight .title_white,
.header_seven .title_white,
.header_two .title_white {
    color: #333;
}
.header_one {
    position: absolute;
    width: 100%;
    top: 2.4rem;
}
.header_two {
    position: absolute;
    width: 100%;
    top: 5.2rem;
}
.header_three {
    position: absolute;
    width: 100%;
    top: 8.4rem;
}
.header_four {
    position: absolute;
    width: 100%;
    top: 11.2rem;
}
.header_five {
    position: absolute;
    width: 100%;
    top: 14rem;
}
.header_six {
    position: absolute;
    width: 100%;
    top: 16.6rem;
}
.header_seven {
    position: absolute;
    width: 100%;
    top:19.4rem;
}
.header_eight {
    position: absolute;
    width: 100%;
    top: 22.4rem;
}


/* 副标题栏 */
.SubtitleBar_one {
    position: absolute;
    width: 100%;
    top: 27.2rem;
}
/* 正文标题栏 */
.more_title_bar {
    position: absolute;
    width: 100%;
    top: 32rem;
    background-color: #fff;
}

/* 正文列表 */
.input_bar {
    position: absolute;
    width: 100%;
    top: 37rem;
}
.input_bar_indent {
    position: absolute;
    width: 100%;
    top: 40.6rem;
    background-color: #fff;
}
.business_bar {
    position: absolute;
    width: 100%;
    top: 43rem;
    background-color: #fff;
}
.association_bar {
    position: absolute;
    width: 100%;
    top: 46rem;
    background-color: #fff;
}
.input_bar_write {
    position: absolute;
    width: 100%;
    top: 50rem;
    background-color: #fff;
}
.img_upload_bar {
    position: absolute;
    width: 100%;
    top: 53rem;
    background-color: #fff;
}

/* 正文菜单 */
.main_menu_bar {
    position: absolute;
    width: 100%;
    top: 58rem;
    background-color: #fff;
}
.main_menu_tab_bar {
    position: absolute;
    width: 100%;
    top: 61rem;
    background-color: #fff;
}
.main_menu_content_bar {
    position: absolute;
    width: 100%;
    top: 63rem;
    background-color: #fff;
}
.main_menu_arrow_bar {
    position: absolute;
    width: 100%;
    top: 65rem;
    background-color: #fff;
}
.main_menu_icon_bar {
    position: absolute;
    width: 100%;
    top: 67rem;
    background-color: #fff;
}
.main_menu_arrowicon_bar {
    position: absolute;
    width: 100%;
    top: 70rem;
    background-color: #fff;
}
.main_menu_iconcontent_bar {
    position: absolute;
    width: 100%;
    top: 72rem;
    background-color: #fff;
}

/* 默认底部菜单栏 */
.chat_bar {
    position: absolute;
    width: 100%;
    top: 74rem;
    background-color: #fff;
}

/* 按钮 */
.button_bar {
    position: absolute;
    width: 100%;
    top: 77rem;
    background-color: #fff;
}

/* 其他 */
.other_bar {
    position: absolute;
    width: 100%;
    top: 87rem;
    background-color: #fff;
}

</style>